import { Table, Tag, Space, Button, notification, Modal,Carousel } from 'antd';
import React, { useState, useEffect, Fragment } from 'react';
import { advertListFn, delAdvert,getADInfo } from '@/apis/advert';
import { operationShow, shineUpon } from '@/utils/index';
import ReactEcharts from 'echarts-for-react'
import { history } from '@/.umi/core/history';
const { Column, ColumnGroup } = Table;

interface Row {
  advertName: string;
  advertPutPoints: string;
  budgetDay: number;
  businessType: number;
  createBy: string;
  createDate: string;
  id: string;
  isFree: number;
  pageSpaceTypes: string;
  payMode: string;
  planId: string;
  planName: string;
  playTimes: number;
  putBeginDate: string;
  putDateType: string;
  putEndDate: string;
  putStatus: string;
  putStatusChild: string;
  putTimeType: string;
  radiationRange: number;
  saleMode: string;
  status: string;
  updateBy: string;
  updateDate: string;
  userCode: string;
}

interface Respond {
  rows: Row[];
  total: number;
}

function del(id: string) {
  delAdvert(id).then((res) => {
    (() => {
      notification.success({
        message: '删除成功',
        description: '广告删除成功',
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });
    })();
  });
}

function edit() {}

function check() {}

function formatter(item: Row) {
  if (+item.status === 2) {
    return <Tag>已删除</Tag>;
  } else {
    switch (item.putStatus) {
      case 'PENDING':
        return <Tag>待投放</Tag>;
      case 'PUTTING':
        return <Tag>投放中</Tag>;
      case 'END':
        return <Tag>已结束</Tag>;
      default:
        return (
          <Tag>
            {' '}
            '被暂停' + `${item.putStatusChild ? ' - ' : ''}` + ` ${item.putStatusChild ? shineUpon[item.putStatusChild] : ''}`;
          </Tag>
        );
    }
  }
}

function action(row: Row, visibleFn: Function) {
  return (
    <p className="f fjb">
      {+row.isFree === -2 || (
        <Fragment>
          <span>
            {operationShow(row) && row.putStatus !== 'END' && (
              <Button type="link" size="small" onClick={() =>{
                history.push({ pathname:'/editAdvert/editAdvert',query:{id:row.id}})
              }}>
                {' '}
                修改
              </Button>
            )}
          </span>
          <span>
            {row.isFree === 0 && (
              <Button type="link" size="small" onClick={() => del(row.id)}>
                {' '}
                删除
              </Button>
            )}
          </span>
        </Fragment>
      )}
      <Button
        type="link"
        size="small"
        onClick={() => {
          visibleFn(row.id);
        }}
      >
        {' '}
        查看数据
      </Button>
    </p>
  );
}

export default function editPlan() {
  const [table, settable] = useState<Row[] | any[]>([]);
  const [visible, setvisible] = useState<boolean>(false);
  useEffect(() => {
    advertListFn({ entity: {} }).then((res: any) => {
      settable(res.rows);
    });
  }, []);

  function visibleFn(id:string) {
    getADInfo(id).then(res=>{
      console.log('res: ', res);
    })
    setvisible(true);
  }

  function onChange(){

  }

  const getOtion = () => {
   const option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: [
        {
          type: 'value',
          name: '右边'
        },
        {
          type: 'value',
          name: '左边'
        }
      ],
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        },
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    return option
  }


  return (
    <div>
      <Table dataSource={table} bordered>
        <Column title="广告名称" align="center" key="advertName" dataIndex="advertName"></Column>
        <Column title="投放日期" align="center" key="putBeginDate" dataIndex="putBeginDate"></Column>
        <Column title="所属推广计划" align="center" key="planName" dataIndex="planName"></Column>
        <Column title="日预算" align="center" key="budgetDay" dataIndex="budgetDay"></Column>
        <Column
          title="状态"
          align="center"
          key="status"
          render={(item) => {
            return formatter(item);
          }}
        ></Column>
        <Column title="操作" align="center" key="action" render={(item: Row) => action(item, visibleFn)}></Column>
      </Table>
      <Modal title="详情" visible={visible} footer={null} maskClosable={false} onCancel={()=>{setvisible(false)}}>
      <ReactEcharts
          option={getOtion()}
          style={{ height: 300 }}
        />
      </Modal>
    </div>
  );
}
